<template>
    <!-- mine/pages/paysets/paysets.wxml -->
    <view class="index" :style="objColor">
        <!-- 数据展示区 -->
        <scroll-view class="scroll-list" scroll-y @scroll="bindscroll">
            <view class="scroll-item" v-for="(item, index) in optionsList" :key="index" v-if="item.payType===1">
                <view>{{ item.payType===1?'个人钱包':item.accountName }}</view>

                <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/s-icon.png" class="tupian"></image>
            </view>
        </scroll-view>

        <!-- 页面可拖拽区域 -->
        <view
            v-if="editting"
            class="touchView"
            @touchstart.stop.prevent="scrollTouchStart"
            @touchmove.stop.prevent="scrollTouchMove"
            @touchend.stop.prevent="scrollTouchEnd"
            id="tuozhuan"
            :style="'height: ' + (windowHeight - bottomHeight) + 'px'"
        ></view>

        <!-- 页面拖拽处理区域 -->
       <movable-area v-if="editting" class="moveable_row" :style="'height: ' + (windowHeight - bottomHeight) + 'px'">
            <movable-view
                :class="'moveable_item ' + (Object.keys(moveData).length ? 'show' : 'hide')"
                :style="'height: ' + scrollItemHeight + 'px;'"
                direction="vertical"
                :x="moveData.x"
                :y="moveData.y"
                :inertia="false"
                damping="9999"
                friction="9999"
            >
                <view class="scroll-item moving" v-if="Object.keys(moveData).length">
                    <view>{{ selectItem.accountName }}</view>
                </view>
            </movable-view>
        </movable-area>

        <view class="set-list">
            <view>拖拽设置支付账户的顺序</view>
        </view>

        <!-- 底部栏 -->
        <view class="index-bottom">
            <view class="sure" v-if="!editting" @tap="changeEditing">编 辑</view>
            <view class="sure quxiao" v-else @tap="changeEditing">确 定</view>
        </view>
    </view>
</template>

<script>
// mine/pages/paysets/paysets.ts  queryList
import { queryList, batchSetting, getMemberInfo } from './../../../api/https.js';
export default {
    data() {
        return {
            memberType: 0,
            optionsList: [],
            // 数据源
            windowHeight: 0,
            // 屏幕高度
            scrollItemHeight: 0,
            // 列表单项高度
            bottomHeight: 0,
            // 底部按钮高度
            selectItem: {
                accountName: ''
            },
            // 当前选中元素
            selectIndex: 0,
            // 当前选中索引
            editting: false,
            // 是否是“编辑”状态
            moveData:{},
            // 列表项移动时记录移动位置
            scrollTop: 0 // scroll-view距离顶部距离
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.init();
    },
    methods: {
        // 初始化页面数据
        init() {
            queryList({}).then((res) => {
                this.optionsList=res.data
            });
            getMemberInfo().then((res) => {
                this.memberType= res.data.memberType

                if (res.data.memberType == 0) {
                    let list = this.optionsList.filter((item) => {
                        return item.payType !== 2;
                    });
                    this.optionsList= list
                }
            });
            this.windowHeight=uni.getSystemInfoSync().windowHeight

			// wx.createSelectorQuery().select('.index-bottom').boundingClientRect(res => {
			// 	this.bottomHeight = res.height+200
		 //    }).exec()
			// wx.createSelectorQuery().select('.scroll-item').boundingClientRect(res => {
			//   this.scrollItemHeight = 62
		 //    }).exec()
           this.bottomHeight = 200
		   this.scrollItemHeight = 62
        },

        // 开始拖拽
        scrollTouchStart(event) {
            const { scrollItemHeight } = this;
            const firstTouchPosition = {
                x: event.changedTouches[0].pageX,
                y: event.changedTouches[0].pageY
            };
            const { data, index } = this.getPositionDomByXY(firstTouchPosition);
            this.moveData= {
                    x: 0,
                    y: firstTouchPosition.y - scrollItemHeight / 2
                },
                this.selectItem= data,
                this.selectIndex= index
        },

        // 拖拽ing...
        scrollTouchMove(event) {
            const { scrollItemHeight } = this;
            this.moveData= {
                    x: 0,
                    y: event.changedTouches[0].pageY - scrollItemHeight / 2
                }
        },

        // 拖拽结束
        scrollTouchEnd: function (event) {

            const { selectIndex, optionsList } = this;
            const endTouchPosition = {
                x: event.changedTouches[0].pageX,
                y: event.changedTouches[0].pageY
            };
            const { index } = this.getPositionDomByXY(endTouchPosition); // 交换顺序

            const temp = optionsList[selectIndex];
            optionsList[selectIndex] = optionsList[index];
            optionsList[index] = temp;
            this.optionsList=optionsList,
			this.moveData={}
        },

        // 根据(x,y)坐标轴获取页面元素
        getPositionDomByXY(potions) {

            const { scrollItemHeight, optionsList, scrollTop } = this;
            const y = potions.y + scrollTop;
            const len = optionsList.length;

            for (let i = 0; i < len; i++) {
                if (y >= i * scrollItemHeight && y < (i + 1) * scrollItemHeight) {
                    // 返回匹配到的数据项
                    return {
                        data: optionsList[i],
                        index: i
                    };
                }
            }

            return y > (len - 1) * scrollItemHeight
                ? {
                      // 匹配项位于列表之下
                      data: optionsList[len - 1],
                      index: len - 1
                  }
                : {
                      // 匹配项位于列表之上
                      data: optionsList[0],
                      index: 0
                  };
        },

        // 切换编辑状态
        changeEditing() {
            const { editting } = this;
			console.log(editting)
            this.editting= !editting
            let optionsList = this.optionsList;
            optionsList.forEach((element, index) => {
                element.sortNum = index;
            });

            if (editting == true) {
                batchSetting({
                    paySortArrayList: optionsList
                }).then((res) => {
                    if (res.code == 0) {
                        uni.showToast({
                            title: res.msg,
                            icon: 'success',
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: '	fail',
                            duration: 2000
                        });
                    }
                });
            } else {
                return false;
            }
        },
        // 监听滚动事件
        bindscroll(e) {
            this.scrollTop = e.detail.scrollTop;
        }
    }
};
</script>
<style lang="less">
@import url('./paysets.less');
</style>
